<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>销毁阶段</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <script src="/VUE/vue2.js"></script>
</head>
<body>
<div id="box">
    <child v-if="isCreat"></child>
</div>
<script>
    Vue.component("child",{
        template:`
        <div>
            抢购倒计时
            <div>{{ time }}</div>
        </div>
        `,

        data(){
            return{
                time:1000
            }
        },
        created(){
          this.id = null
        },
        mounted(){
            this.id = setInterval(()=>{     // 这个倒计时绑在window中，即使停用子组件之后，倒计时仍然进行，所以需要在子组件内部对其销毁
                this.time--
                console.log("倒计时")
            },1000)

            window.onresize = ()=>{
                console.log("resize")
            }
        },

        beforeDestroy(){
            console.log("beforeDestroy","清除定时器，事件解绑....")

            clearInterval(this.id)   //清除定时器

            window.onresize = null    //解绑resize
        },
        destroyed(){
            console.log("","清除定时器，事件解绑....")
        }
    })

    let vm = new Vue({
        el: "#box",
        data: {
            isCreat: true
        },

    })
</script>
</body>
</html>